<template>
  <div class="search-com">
    <el-form :inline="true" :model="formData" ref="formRef" class="search-form">
      <el-form-item v-for="item in props.searchList" :key="item.key" :label="item.label">
        <!-- 输入框 -->
        <el-input 
          v-if="item.type === 'input'" 
          v-model="formData[item.key]" 
          :placeholder="`请输入${item.label}`"
          clearable
          style="width: 260px;"
        />
        
        <!-- 下拉选择框 -->
        <el-select 
          v-else-if="item.type === 'select'" 
          v-model="formData[item.key]" 
          :placeholder="`请选择${item.label}`"
          clearable
          style="width: 260px;"
        >
          <el-option 
            v-for="option in item.options" 
            :key="option.value" 
            :label="option.label" 
            :value="option.value" 
          />
        </el-select>
        
        <!-- 日期选择器 -->
        <el-date-picker 
          v-else-if="item.type === 'date'" 
          v-model="formData[item.key]" 
          :type="item.dateType || 'date'"
          :placeholder="getDatePlaceholder(item)"
          clearable
          style="width: 260px;"
        />
        
        <!-- 日期范围选择器 -->
        <el-date-picker 
          v-else-if="item.type === 'daterange'" 
          v-model="formData[item.key]" 
          :type="item.dateType || 'daterange'"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="item.defaultTime || [new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)]"
          clearable
        />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="handleSearch" round>
          <el-icon :size="16" class="mr-2"><Search /></el-icon>
          <span class="ml4">查询</span>
        </el-button>
        <el-button @click="handleReset" round>
          清空
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue';
// 定义props，接收搜索条件列表
const props = defineProps({
  searchList: {
    type: Array,
    default: () => []
  }
});

// 定义事件
const emit = defineEmits(['search', 'reset']);

// 表单引用
const formRef = ref(null);

// 表单数据
const formData = reactive({});

// 初始化表单数据
onMounted(() => {
  initFormData();
});

// 初始化表单数据
const initFormData = () => {
  props.searchList.forEach(item => {
    formData[item.key] = '';
  });
};

// 根据日期类型获取占位符
const getDatePlaceholder = (item) => {
  const typePlaceholder = {
    'date': '请选择日期',
    'datetime': '请选择日期时间',
    'year': '请选择年份',
    'month': '请选择月份',
    'week': '请选择周',
    'datetimerange': '请选择日期时间范围',
    'monthrange': '请选择月份范围',
    'yearrange': '请选择年份范围'
  };
  return typePlaceholder[item.dateType] || '请选择';
};

// 查询方法
const handleSearch = () => {
  emit('search', { ...formData });
};

// 重置方法
const handleReset = () => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
  initFormData();
  emit('reset');
};
</script>

<style scoped lang="scss">
.search-com {
  margin-bottom: 20px;
  
  .search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    
    .el-form-item {
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}
</style>


